const LineChart = ()=>{
    const myChart = echarts.init(document.querySelector('#line'))
    const option = {
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
          axisLabel:{
           color:'#999',
        },
        axisLine:{
            lineStyle:{
                color:'#ccc',
                type:'dashed'
            }
        }
        },
      
        yAxis: {
          type: 'value',
          splitLine:{
            lineStyle:{
                type:'dashed'
            }
          }
        },
        series: [
          {
            data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
            type: 'line',
            smooth: true,
            lineStyle:{
              width:6,
            },
            symbolSize:10,
            areaStyle:{
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: '#499FEE' // 0% 处的颜色
                }, 
                {
                  offset: 0.8,
                  color: 'rgba(255,255,255,0.2)' // 80% 处的颜色
              }, 
                {
                    offset: 1,
                    color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
            }
          }
        ],
        title:{
            text:'2022全学科薪资走势',
            top:15,
            left:10,
            textStyle:{
                fontSize:16
            }
        },
        tooltip:{
          trigger:'axis'
        },
        grid:{
          top:'20%'
        },
        color:{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0,
              color: '#499FEE' // 0% 处的颜色
          }, {
              offset: 1,
              color: '#5D75F0' // 100% 处的颜色
          }],
          global: false // 缺省为 false
      }
      };
    myChart.setOption(option)
}
LineChart()

const classSalaryChart = ()=>{
  const myChart = echarts.init(document.querySelector('#salary'))
  const option = {
    title:{
             text:'班级薪资分布',
             top:15,
             left:10,
             textStyle:{
                 fontSize:16
             }
         },
   tooltip: {
     trigger: 'item'
   },
   legend: {
     bottom: '6%',
     left: 'center'
   },
   series: [
     {
       name: '班级薪资分布',
       type: 'pie',
       radius: ['50%', '64%'],
       // avoidLabelOverlap: false,
       itemStyle: {
         borderRadius: 10,
         borderColor: '#fff',
         borderWidth: 2
       },
       label: {
         show: false,
         position: 'center'
       },
       // emphasis: {
       //   label: {
       //     show: true,
       //     fontSize: '40',
       //     fontWeight: 'bold'
       //   }
       // },
       labelLine: {
         show: false
       },
       color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
       data: [
        { value: 12, name: '1万以下' },
         { value: 23, name: '1-1.5万' },
         { value: 18, name: '1.5-2万' },
         { value: 10, name: '2万以上' }
       ]
     }
   ]
 };
  myChart.setOption(option)
}
classSalaryChart()

const sexsSalaryChart = ()=>{
  const myChart = echarts.init(document.querySelector('#gender'))
  const option = {
    title:[{
      text:'男女薪资分布',
      top:15,
      left:10,
      textStyle:{
          fontSize:16
      }
      },{
        text:'男生',
        top:'45%',
        left:'45%',
        textStyle:{
            fontSize:12
        }
        },{
          text:'女生',
          top:'85%',
          left:'45%',
          textStyle:{
              fontSize:12
          }
          },
     ],
   tooltip: {
     trigger: 'item'
   },
 
   series: [
     {
       name: '男生薪资分布',
       type: 'pie',
       radius: ['20%', '30%'],//内外圆半径
       center:['50%','30%'],//圆心位置
       // avoidLabelOverlap: false,
     
       color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
       data: [
        { value: 8, name: '1万以下' },
         { value: 20, name: '1-1.5万' },
         { value: 15, name: '1.5-2万' },
         { value: 10, name: '2万以上' }
       ]
     },
     {
      name: '女生薪资分布',
      type: 'pie',
      radius: ['20%', '30%'],//内外圆半径
      center:['50%','70%'],//圆心位置
      // avoidLabelOverlap: false,
    
      color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
      data: [
       { value: 15, name: '1万以下' },
        { value: 20, name: '1-1.5万' },
        { value: 10, name: '1.5-2万' },
        { value: 8, name: '2万以上' }
      ]
    }
   ]
 };
  myChart.setOption(option)
}
sexsSalaryChart()

const mapChart = () =>{
  const myChart = echarts.init(document.querySelector('#map'))
  // 因为用地图表示每个省有几名同学
// 所以可以提前准备好数据
const mapData = [
  { name: '南海诸岛', value: 0 },
  { name: '北京', value: 3 },
  { name: '天津', value: 2 },
  { name: '上海', value: 4 },
  { name: '重庆', value: 1 },
  { name: '河北', value: 20 },
  { name: '河南', value: 23 },
  { name: '云南', value: 0 },
  { name: '辽宁', value: 15 },
  { name: '黑龙江', value: 12 },
  { name: '湖南', value: 2 },
  { name: '安徽', value: 5 },
  { name: '山东', value: 18 },
  { name: '新疆', value: 0 },
  { name: '江苏', value: 5 },
  { name: '浙江', value: 1 },
  { name: '江西', value: 4 },
  { name: '湖北', value: 3 },
  { name: '广西', value: 2 },
  { name: '甘肃', value: 9 },
  { name: '山西', value: 11 },
  { name: '内蒙古', value: 14 },
  { name: '陕西', value: 14 },
  { name: '吉林', value: 10 },
  { name: '福建', value: 0 },
  { name: '贵州', value: 0 },
  { name: '广东', value: 0 },
  { name: '青海', value: 3 },
  { name: '西藏', value: 0 },
  { name: '四川', value: 1 },
  { name: '宁夏', value: 1 },
  { name: '海南', value: 0 },
  { name: '台湾', value: 0 },
  { name: '香港', value: 0 },
  { name: '澳门', value: 0 }
]
  const option = {
    title:{
      text:'籍贯分布',
      top:10,
      left:10,
      textStyle:{
          fontSize:16
      }
      },
      series:{
        data:mapData,
        name:'籍贯分布',
        type:'map',
        //地图文件去下载的压缩包（test>data>map>js）
        map:'china',
        label:{
          show:true,
          fontSize:10,
          color:'rgba(0,0,0,0.7)'
        },
        itemStyle:{
          borderColor:'rgba(0, 0, 0, 0.2)',
          areaColor:'#E0FFFF'
        },
        emphasis:{
          itemStyle:{
            areaColor:'#34D39A',
            borderWidth:0,
            shadowBlur:20,
            shadowOffsetX:0,
            shadowOffsetY :0,
            shadowColor:'rgba(0, 0, 0, 0.5)'
          }
         
        }//表示做中国地图（做什么地图，必须引入对应的地图文件）
      },
      tooltip:{
        formatter:'{b}: {c}位学员',
        borderColor:'transparent',
        backgroundColor:'rgba(0,0,0,0.5)',
        textStyle: {
          color: '#fff'
        }
      },
    visualMap:[{
      type:'continuous',
      show:true,
      min: 0,
      max: 20, 
      text: [20, 0],
      left:40,
      bottom:20,
      inRange: {
        color: ['#fff', ' #0075F0'],
    }
    }]
  }
  myChart.setOption(option)
}
mapChart()

const groupSalaryChart = ()=>{
  const myChart = echarts.init(document.querySelector('#lines'))
  const option = {
    xAxis: {
      type: 'category',
      data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
      axisLine:{
        lineStyle:{
          color:'#ccc',
          type:'dashed',
        }
      },
      axisLabel:{
         color:'#999'
      }
    },
    yAxis: {
      type: 'value',
      splitLine:{
        lineStyle:{
          type:'dashed'
        }
      }
    },
    series: [
      {
        data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        type: 'bar',
        name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      },
      {
        data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        type: 'bar',
        name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      }
    ],
    grid:{
      left:70,
      top:30,
      right:30,
      bottom:50
    },
    tooltip:{
     
    },
    color:[{
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#34D39A' // 0% 处的颜色
      }, {
          offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    },
    {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [{
          offset: 0, color: '#499FEE' // 0% 处的颜色
      }, {
          offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
      }],
      global: false // 缺省为 false
    }]    
  };
  myChart.setOption(option)
}
groupSalaryChart()